<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <div class="dashboard-text">
      roles:
      <span v-for="role in roles" :key="role">{{ role }}</span>
    </div>


    <el-button type="primary" v-if="isAuth('save')" @click="dialogVisible = true">增加</el-button>
    <el-button type="primary" v-if="isAuth('delete')">删除</el-button>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <!-- <myDialog></myDialog> -->
      <commonForm :formLabel="operateFormLabel" :form="operateForm"></commonForm>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getUserBtnPermission } from "@/api/user";
import { getForm } from "@/api/form";
import myDialog from "@/components/common/testDialog";
import commonForm from "@/components/common/CommonForm";
export default {
  components: { myDialog, commonForm },
    mounted() {
    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
    this.getForm();

    //console.log(JSON.stringify(this.aa))
    //console.log(this.area,this.formName2)
  },
  methods: {
    getForm(){
      return new Promise((resolve, reject) => {

        getForm(this.area,this.formName)
          .then((response) => {
            const { data } = response;

            this.operateFormLabel=[];
           // this.operateForm={};

            data.forEach ((item,index,arr)=>{
                if(item.type!=2){
                }else{
                  item.opts=JSON.parse(item.opts)
                }
                  this.operateFormLabel.push(item);
                this.operateForm[item['model']]='';
            });

            console.log(JSON.stringify(this.operateFormLabel))
            console.log(JSON.stringify(this.operateForm))

            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },


    getPermission(routeName, permission_routes) {
  
      let menuId = this.filterMenuId(routeName, permission_routes);
      this.menuId = menuId;

      return new Promise((resolve, reject) => {
        getUserBtnPermission(this.menuId)
          .then((response) => {
            const { data } = response;
            this.permissions = [...data];
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

    isAuth(operator) {
      return this.permissions.some((item, index, arr) => {
        return item["name"] === operator;
      });
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    filterMenuId(routeName, menus) {
      let menuId;
      for (var i = 0; i < menus.length; i++) {
        if (menus[i].children) {
          return this.filterMenuId(routeName, menus[i].children);
        } else {
          if (routeName == menus[i]["name"]) {
            menuId = menus[i]["menuId"];
            return menuId;
          }
        }
      }
    },
  },
  data() {
    return {
      formName: '车辆查看',
      dialogVisible: false,
      menuId: "",
      permissions: [],
      operateForm: {
        name: "",
        addr: "",
        age: "",
        birth: "",
        sex: "",
      },
      aa:[
            {
              label: "男",
              value: 1,
            },
            {
              label: "女",
              value: 0,
            },
          ],
      operateFormLabel: [
        {
          model: "name",
          label: "姓名",
        },
        {
          model: "age",
          label: "年龄22",
        },
        {
          model: "sex",
          label: "性别",
          type: "select",
          opts: [
            {
              label: "男",
              value: 1,
            },
            {
              label: "女",
              value: 0,
            },
          ],
        },
        {
          model: "birth",
          label: "出生日期",
          type: "date",
        },
        {
          model: "addr",
          label: "地址",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["name", "roles", "permission_routes","area"]),
  },
  watch: {
    $route: {
      handler: function (route) {
        console.log(route);
        console.log("ssss: ", this.permission_routes);
        this.getPermission(route.name, this.permission_routes);
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
